<!--  -->
<template>
  <div class="centerNav">
    <div class="barNav">
      <div class="barNavContent">
        <ul>
          <li v-for="(item,i) in homeIconNavList"
            :key="i">
            <img :src="item.iconurl"
              alt="">
            <span>{{item.icontitle}}</span>
          </li>
        </ul>
        <div class="navScroll">
          <div class="scrollBtn"
            :style="scrollBar"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      // 展示区域父级宽度
      contentWidth: window.innerWidth,
      // 展示区域内容宽度
      itemWidth: 720,
      // 滚动条父级宽度
      scrollWidth: 98,
      // 滚动条内部宽度
      scrollItemWidth: 0,
      startX: 0,
      moveX: 0,
      left: 0,
      subX: 0,
      moveWidth: 0,
      endflag: 0
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    this.getScrollBarItemWidth()
    this.getNavEvent()
  },
  methods: {
    // 求出滚动条的内部宽度
    getScrollBarItemWidth () {
      this.scrollItemWidth = this.scrollWidth * (this.contentWidth / this.itemWidth)
    },
    getNavEvent () {
      this.$el.addEventListener('touchstart', this.touchNavStart, false)
      this.$el.addEventListener('touchmove', this.touchNavMove, false)
      this.$el.addEventListener('touchend', this.touchNavEnd, false)
    },
    touchNavStart (e) {
      const touch = e.touches[0]
      this.startX = touch.pageX
      console.log('触摸开始')
    },
    touchNavMove (e) {
      const touch = e.touches[0]
      this.moveX = touch.pageX
      // console.log('触摸中')
      // 移动的距离
      this.subX = this.moveX - this.startX
      this.moveWidth = -((this.scrollWidth / this.itemWidth) * this.subX - this.endflag)
      // 左边边界值处理
      if (this.subX > 0) {
        this.moveWidth = 0
      }
      // 右边边界值处理
      if (this.moveWidth > (this.scrollWidth - this.scrollItemWidth)) {
        this.moveWidth = this.scrollWidth - this.scrollItemWidth
      }
    },
    touchNavEnd () {
      this.endflag = this.moveWidth
    }
  },
  computed: {
    ...mapState(['homeIconNavList']),
    scrollBar () {
      return {
        width: `${this.scrollItemWidth}px`,
        left: this.moveWidth + 'px'
      }
    }
  }
}
</script>
<style lang='stylus' scoped>
/* @import url(); 引入css类 */
.centerNav {
  width: 100%;
  height: 11.25rem;
  background: #ffffff;
  position: relative;
  padding: 0.3125rem 0rem;

  .barNav {
    width: 100%;
    height: 100%;
    overflow-x: scroll;

    .barNavContent {
      width: 45rem;
      height: 100%;

      ul {
        width: 45rem;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        li {
          width: 5.625rem;
          height: 5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 1.92px;

          img {
            width: 2.4375rem;
            heihgt: 2.4375rem;
            padding-bottom: 0.3125rem;
          }
        }
      }
    }
  }

  .barNav::-webkit-scrollbar {
    display: none;
  }
}

.navScroll {
  position: absolute;
  width: 6.125rem;
  height: 0.125rem;
  background-color: #E8E8E8;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.4375rem;

  .scrollBtn {
    width: 2.5rem;
    height: 0.125rem;
    background-color: #FF6969;
    position: absolute;
  }
}
</style>
